<template>
  <div class="slide-bar">
   <scroll class="slide-bar-height">
     <div v-for="(item,index) in categorylist">
       <button :key="index"
        :class="currentindex == index ? 'active' :''"
         class="slide-bar-item"
         @click="slideBarItemClick(item,index)">
         {{item.title}}
       </button>
     </div>
   </scroll>
  </div>
</template>

<script>
  import scroll from '../../../components/common/scroll/scroll.vue'
  export default{
    data:function(){
    return{
      currentindex:0
    }
    },
    components:{
      scroll
    },
    props:{
      categorylist:{
        type:Array,
        default(){
          return []
        }
      }
    },
    methods:{
      slideBarItemClick(item,index){
        const obj={
          maitKey:item.maitKey,
          index
        }
        this.currentindex = index
        // console.log(this.currentindex)
        this.$emit('slideBarItemClick',obj)
      }
    }
  }
</script>

<style scoped="scoped">
  .slide-bar{
    width: 100%;
  }
  .slide-bar-height{
    position: fixed;
    left: 0;
    bottom: 49px;
    right: 0;
    top: 44px;
    background-color: #f6f6f6;
    width: 100px;
    overflow: hidden;
  }
  .slide-bar-item{
    line-height: 45px;
    font-size: 14px;
    width: 100px;
    height: 45px;
    user-select: none;
    border: 0;
    outline: none;
    background: none;
    text-align: center;
  }
  .slide-bar-item.active{
    font-weight: 700;
    border-left: 3px solid #ff5777;
    background-color: #FFFFFF;
  }
</style>
